<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/Validform.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{margin:50px;}
.form-group{display:table;position:relative}
.Validform_checktip{background-color:#FFF}
.Validform_wrong{position:absolute;top:-40px;right:30px;padding:8px 10px 8px 28px;border:1px solid #CCC;background-position:10px center;overflow:visible;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.Validform_wrong:before{content:'';width:0px;height:0px;border-color:#CCC transparent transparent transparent;border-width:5px;border-style:solid;position:absolute;left:15px;top:33px;}
.Validform_wrong:after{content:'';width:0px;height:0px;border-color:#FFF transparent transparent transparent;border-width:4px;border-style:solid;position:absolute;left:16px;top:32px;}
.Validform_right{position:absolute;right:-15px;top:7px;background:url(images/right.png) no-repeat;width:16px;height:16px;}
</style>
</head>
<body>




            <form class="form-horizontal" role="form"> 
            	<div class="form-group"> 
                    <label for="firstname" class="col-xs-3 control-label show_t">名字</label> 
                    <div class="col-xs-9"> 
                        <input type="text" class="form-control" name="firstname"  datatype="name" > 
                        <span class="Validform_checktip"></span>
                    </div>
                </div> 
                <div class="form-group"> 
                    <label for="firstname" class="col-xs-3 control-label show_t">邮箱</label> 
                    <div class="col-xs-9"> 
                        <input type="text" class="form-control" name="email"  datatype="e" errormsg="请输入正确的邮箱" 
                        nullmsg="请输入邮箱">
                        <span class="Validform_checktip"></span> 
                    </div>
                </div>
                <div class="form-group"> 
                    <label for="firstname" class="col-xs-3 control-label show_t">密码</label> 
                    <div class="col-xs-9"> 
                        <input type="password" class="form-control" name="password"  datatype="pwd" > 
                        <span class="Validform_checktip"></span>
                    </div>
                </div>  
                <div class="form-group"> 
                    <label for="firstname" class="col-xs-3 control-label show_t">确认密码</label> 
                    <div class="col-xs-9"> 
                        <input type="password" class="form-control" name="con_password" datatype="pwd"   errormsg="两次输入的密码不一致"  recheck="password"> 
                        <span class="Validform_checktip"></span>
                    </div>
                </div>
                <div class="form-group"> 
                    <div class="col-xs-offset-3 col-xs-9"> 
                        <div class="checkbox"> 
                            <label> 
                                <input type="checkbox">请记住我 
                            </label> 
                        </div> 
                    </div> 
                </div> 
                <div class="form-group"> 
                    <div class="col-xs-offset-3 col-xs-9"> 
                        <button type="submit" class="btn btn-default">登录</button> 
                    </div> 
                </div>           
            </form>
           

   
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
<!--调用表单验证-->
<script type="text/javascript">
	var demo=$(".form-horizontal").Validform({
		tiptype:3,
		datatype:{
			"number" : /^((\+?86)|(\(\+86\)))?\d{3,4}-\d{7,8}(-\d{3,4})?$|^((\+?86)|(\(\+86\)))?1\d{10}$/
		},
		label:".show_t"	
	});
	demo.tipmsg.r = ' ';
	/* 
	1,datatype 属性值说明
	*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
	*6-16：检测是否为6到16位任意字符；
	n：数字类型；
	n6-16：6到16位数字；
	s：字符串类型；
	s6-18：6到18位字符串；
	p：验证是否为邮政编码；
	m：手机号码格式；
	e：email格式；
	url：验证网址格式。
	name:以字母开头的6-12位字符。(自定义,可参考插件代码)
	yfz：身份证格式。(自定义,可参考插件代码)
	tel:固话号码格式。(自定义,可参考插件代码)
	
	2,nullmsg 表单为空时提示的信息
	  默认值：此项不能为空！
	  
	3,errormsg 验证失败提示的信息
	  默认值: 自定义
	
	4,sucmsg 验证成功提示的信息
	  默认值: 通过信息验证！
	  
	5,参考:http://validform.rjboy.cn/  
	*/
</script>


</body>

</html>
